<template>
	<view class="category" :class="config.style">
		<scroll-view class="scroll-view-main" scroll-x="true" scroll-left="1">
			<view class="item" :class="activeClass == 0 ? 'active':''" @click="changeItem(0,0)">
				<text>推荐</text>
			</view>
			<view class="item" :class="activeClass == index+1 ? 'active':''" v-for="(item,index) in tree"  :key="index" @click="changeItem(index+1,item.id)">
				<text>{{item.title}}</text>
			</view>
		</scroll-view>
		
		<view v-if="params.sub_show == 1">
			<view v-for="(item,index) in tree" :key="index">
				<scroll-view class="scroll-view-child" scroll-x="true" scroll-left="10">
					<view class="item" :class="activeClass == index+1 ? 'active':''" v-for="(child_item,child_index) in item._child" :key="child_index" @click="goToCategoryList(child_item.pid, child_item.id)">
						<text class="">{{child_item.title}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>

	export default {
		name: 'Category',
		props: {
			title: {
				type: String,
				default: '分类组件'
			},
			type: {
				type: String,
				default: 'Category',
			},
			params: {
				type: Object,
				default: {},
			},
			config: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {
				tree: '',
				activeClass: 0,
			}
		},
		onLoad(option) {
			
		},
		created() {
			//console.log(this.params)
			this.getCategoryTree()
		},
		methods: {
			/**
			 * 获取分类数据
			 */
			getCategoryTree: function(){
				let that = this
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/category'
					//#endif
					//#ifdef H5
					url = 'entry/site/category'
					//#endif
				this.util.request({
					url : url,
					data: {
						action: 'tree',
					},
					success: function (res) {
						if (res.data.code == 200) {
							that.tree = res.data.data
							//uni.setStorageSync('category_tree',res.data.data);
						}
					}
				})
			},
			
			/**
			 * 点击一级分类元素
			 */
			changeItem: function(index,id){
				//console.log(index)
				this.activeClass = index
				if(this.params.sub_show == 0){
					this.goToCategoryList(id, 0)
				}
			},
			
			/**
			 * 进入分类列表页
			 * @param {Object} id
			 */
			goToCategoryList(id, child_id) {
				let urlParams = 'id='+id+'&cid='+child_id
				let url = '../../pages/category/list?' + urlParams
				//console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			}
		}
	}
</script>

<style lang="scss">
	.category {
		margin: 0 20rpx;
		.scroll-view-main {
			white-space: nowrap;
			width: 100%;
			overflow: hidden;
			.item {
				position: relative;
				font-size: 26rpx;
				display: inline-block;
				margin: 12rpx 20rpx;
				line-height: 48rpx;
				color: #666;
				&:first-child {
					margin-left: 0;
				}
			}
			.active {
				font-size: 28rpx;
				font-weight: 600;
				color: #000;
				z-index: 1;
				&:after {
					content: '';
					position: absolute;
					display: block;
					z-index: 2;
					top: 40rpx;
					left: 0;
					right: 0;
					width: 60%;
					height: 16rpx;
					margin: 0 auto;
					-webkit-transform-origin: 50% 100%;
					-ms-transform-origin: 50% 100%;
					transform-origin: 50% 100%;
					-webkit-transform: scaleY(0.33);
					-ms-transform: scaleY(0.33);
					transform: scaleY(0.33);
				}
			}
		}
		.scroll-view-child {
			
			.item {
				display: none;
				font-size: 24rpx;
				border-radius: 16rpx;
				background-color: #f2f2f2;
				color: #999;
				padding: 6rpx 12rpx;
				width: auto;
				overflow: hidden;
				margin-right: 20rpx;
				margin-top: 12rpx;
				&:first-child {
					
				}
			}
			.active {
				display: inline-block;
			}
		}
	}
	
	.Blue {
		.scroll-view-main {
			.active {
				&:after {
					background-color: $Blue;
				}
			}
		}
	}
	.Green {
		.scroll-view-main {
			.active {
				&:after {
					background-color: $Green;
				}
			}
		}
	}
	.LightRed {
		.scroll-view-main {
			.active {
				&:after {
					background-color: $LightRed;
				}
			}
		}
	}
	.Orange {
		.scroll-view-main {
			.active {
				&:after {
					background-color: $Orange;
				}
			}
		}
	}
	.LightPink {
		.scroll-view-main {
			.active {
				&:after {
					background-color: $LightPink;
				}
			}
		}
		
	}
	.Magenta {
		.scroll-view-main {
			.active {
				&:after {
					background-color: $Magenta;
				}
			}
		}
	}
	
</style>
